<template>
  <!-- 协力概览 -->
  <div class="overview">
    <div class="overview1">
      <h2>关于我们</h2>
      <div class="content">
        <div class="img">
          <img :src="info[1].image" alt />
        </div>
        <div class="text">
          <!-- <p v-html="info[1].desc"></p> -->
          <p class="writing">{{ info[1].content }}</p>
          <a :href="info[1].file_input" target="_block">下载简介</a>
        </div>
      </div>
    </div>
    <div class="overview2_box">
      <div class="overview2">
        <h2>协力理念</h2>
        <div class="text" v-html="info[2].desc"></div>
        <div class="concept">
          <!-- <img class="imgX" src="@/assets/images/concept.png" alt /> -->
        </div>
      </div>
    </div>
    <div class="culture clearfloat">
      <h2>协力文化</h2>

      <div
        v-if="this.$store.state.headTitle.equipment == 'pc'"
        class="culture_box"
      >
        <div class="culture_item" v-for="(item, index) in culture" :key="index">
          <img :src="item.image" alt />
          <h6>{{ item.title }}</h6>
          <p
            v-for="(i, index) in item.desc_array"
            :key="index"
            :class="i == 0 ? 'p1' : ''"
          >
            {{ i }}
          </p>
          <!-- <p>规模律师事务所</p> -->
        </div>
      </div>
      <div v-if="this.$store.state.headTitle.equipment == 'mobile'">
        <swiper :options="swiperOption">
          <swiper-slide
            class="swiper-slide"
            v-for="(item, index) in culture"
            :key="index"
          >
            <div class="culture_item">
              <img :src="item.image" alt />
              <h6>{{ item.title }}</h6>
              <p
                v-for="(i, index) in item.desc_array"
                :key="index"
                :class="i == 0 ? 'p1' : ''"
              >
                {{ i }}
              </p>
            </div>
          </swiper-slide>
          <!-- 箭头左 -->
          <div
            id="swiper-button-prev1"
            class="swiper-button-prev"
            slot="button-prev"
          ></div>
          <!-- 箭头右 -->
          <div
            id="swiper-button-next1"
            class="swiper-button-next"
            slot="button-next"
          ></div>
        </swiper>
      </div>
    </div>
  </div>
</template>
<script>
import { company_type_list } from "@/api/about.js";
export default {
  data() {
    return {
      banner_list: 5,
      info: [],
      swiperOption: {
        slidesPerView: "auto",
        // 鼠标控制滚动
        // mousewheel: {
        //   releaseOnEdges: true
        // },
        //设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        //鼠标变成抓手型
        grabCursor: true,
        //开启鼠标滚轮控制Swiper切换
        mousewheel: true
      }
    };
  },
  created() {
    company_type_list().then(res => {
      console.log(res);
      res.data.data[3].map(item => {
        item.desc_array = item.desc.split("；");
      });
      this.info = res.data.data;

      this.culture = this.info[3];
    });
  },
  methods: {}
};
</script>
<style scoped src="./sass/aboutUs.css"></style>
